<template>
    <div class="main">
        <el-row>
            <el-col>
                <el-form :model="search" :inline="true">
                    <el-form-item>
                        <el-input v-model="search.name" placeholder="名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="search.isCrack" clearable placeholder="是否破解">
                            <el-option key="1" label="是" value="true" />
                            <el-option key="2" label="否" value="false" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="search.isPay" clearable placeholder="免费">
                            <el-option key="1" label="是" value="true" />
                            <el-option key="2" label="否" value="false" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="search.type" clearable placeholder="类型">
                            <el-option key="1" label="游戏" value="1" />
                            <el-option key="2" label="软件" value="2" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="loadData" type="primary">搜索</el-button>
                        <el-button @click="resetSearch">重置</el-button>
                        <el-button @click="openPcsoftwareAdd" type="primary">新增</el-button>
                        <el-button v-show="!search.isDelete" @click="selectLoadData" type="primary">回收站</el-button>
                        <el-button v-show="search.isDelete" @click="resetSearch" type="primary">退出回收站</el-button>
                        <el-button @click="exportExcel" type="primary">导出</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row style="height: calc(100% - 5px);">
            <el-table height="100%" :data="dataList" border style="width: 100%;" :row-key="getRowKey" ref="singleTable">
                <el-table-column type="expand">
                    <template #default="scope">
                        <div m="4">
                            <v-md-editor v-model="scope.row.info" :mode="`preview`"></v-md-editor>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="编号" min-width="100">
                    <template #default="scope">
                        <el-link type="primary" @click="selectAndUpdate(scope.row)">
                            {{ scope.row.code }}
                        </el-link>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" min-width="100" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="downurl" label="下载地址" min-width="140" show-overflow-tooltip />
                <el-table-column prop="type" label="类型" min-width="60" show-overflow-tooltip>
                    <template #default="scope">
                        {{ scope.row.type == 1 ? '游戏' : '软件' }}
                    </template>
                </el-table-column>
                <el-table-column prop="isHot" label="推荐">
                    <template #default="scope">
                        {{ scope.row.isHot ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column prop="isCrack" label="破解">
                    <template #default="scope">
                        {{ scope.row.isCrack ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column prop="isContainCrack" label="破解说明">
                    <template #default="scope">
                        {{ scope.row.isContainCrack ? '有' : '无' }}
                    </template>
                </el-table-column>
                <el-table-column prop="money" label="费用（元）" />
                <el-table-column prop="discount" label="折扣" />
                <el-table-column prop="isPay" label="免费">
                    <template #default="scope">
                        {{ scope.row.isPay ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column prop="newPrice" label="限时特价" />
                <el-table-column prop="descs" label="描述" min-width="140" show-overflow-tooltip />
                <!-- <el-table-column prop="sort" label="排序" /> -->
                <el-table-column prop="isShow" label="展示">
                    <template #default="scope">
                        {{ scope.row.isShow ? '是' : '否' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-link v-if="!search.isDelete" type="danger" @click="remove(scope.row.id)">删除</el-link>
                        <el-link v-if="search.isDelete" type="danger" @click="recover(scope.row.id)">恢复</el-link>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display: flex;width: 100%;justify-content: center;">
                <el-pagination small v-model:current-page.sync="page" v-model:page-size="pageSize"
                    :page-sizes="[1, 10, 20, 30, 50]" background layout="total, sizes, prev, pager, next, jumper"
                    :total="total" @size-change="loadData" @current-change="loadData" />
            </div>
        </el-row>
    </div>
    <!-- 新增 -->
    <el-dialog v-model="pcsoftwareDialog" title="add" width="80%" :align-center="true" @closed="closedPcsoftwareDialog">
        <template #header>
            <span slot="title" class="dialogTitle1">新增</span>
        </template>
        <div class="el-dialog-div">
            <el-form :model="pcsoftware" :rules="pcsoftwareRefRules" ref="pcsoftwareRef" label-width="110"
                label-position="right" class="demo-ruleForm">
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="name" label="名称">
                            <el-input v-model="pcsoftware.name" placeholder="名称"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item prop="downurl" label="下载地址">
                            <el-input v-model="pcsoftware.downurl" placeholder="下载地址"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item prop="isCrack" label="是否破解">
                            <el-radio-group v-model="pcsoftware.isCrack">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="isHot" label="是否推荐">
                            <el-radio-group v-model="pcsoftware.isHot">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="isShow" label="是否对外显示">
                            <el-radio-group v-model="pcsoftware.isShow">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="type" label="类型">
                            <el-radio-group v-model="pcsoftware.type">
                                <el-radio :label="1">游戏</el-radio>
                                <el-radio :label="2">软件</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="isContainCrack" label="破解说明">
                            <el-radio-group v-model="pcsoftware.isContainCrack">
                                <el-radio :label="true">有</el-radio>
                                <el-radio :label="false">无</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="isPay" label="限时免费">
                            <el-radio-group v-model="pcsoftware.isPay">
                                <el-radio :label="true">是</el-radio>
                                <el-radio :label="false">否</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="money" label="费用">
                            <el-input-number v-model="pcsoftware.money" :precision="2" :step="0.1" :min="0"
                                placeholder="费用" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="discount" label="折扣">
                            <el-input-number v-model="pcsoftware.discount" :min="0" :max="10" :precision="1" :step="0.1"
                                controls-position="right" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item prop="platFrom" label="平台">
                            <el-radio-group v-model="pcsoftware.platFrom">
                                <el-radio :label="1">PC</el-radio>
                                <el-radio :label="2">PE</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item prop="system" label="系统">
                            <el-checkbox-group v-model="pcsoftware.system">
                                <el-checkbox label="window">window</el-checkbox>
                                <el-checkbox label="mac">mac</el-checkbox>
                                <el-checkbox label="linun">linun</el-checkbox>
                                <el-checkbox label="Android">Android</el-checkbox>
                                <el-checkbox label="iphone">iphone</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                        <el-form-item prop="sort" label="排序">
                            <el-input v-model="pcsoftware.sort" placeholder="排序"></el-input>
                        </el-form-item>
                    </el-col> -->
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item prop="descs" label="描述">
                            <el-input type="textarea" :autosize="{ minRows: 3 }" v-model="pcsoftware.descs"
                                placeholder="描述"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item prop="info" label="说明">
                            <v-md-editor v-model="pcsoftware.info" height="300px"></v-md-editor>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closePcsoftwareDialog">取消</el-button>
                <el-button :loading="loadingStatus" @click="saveSoftware" type="primary">确认</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
export default {
    data() {
        return {
            page: 1,
            pageSize: 10,
            total: 0,
            loadingStatus: false,
            search: {
                name: null,
                isCrack: null,
                isDelete: false
            },
            dataList: [],
            pcsoftwareDialog: false,
            pcsoftware: {
                name: "",
                downurl: "",
                isCrack: true,
                isHot: false,
                isShow: true,
                isDelete: false,
                isPay: false,
                isContainCrack: false,
                discount: 10,
                money: 0,
                soft: 1,
                descs: "",
                info: "",
                type: null,
                platFrom: 1,
                system:[]
            },
            pcsoftwareRefRules: {
                name: [{ required: true, message: '必填' }],
                downurl: [{ required: true, message: '必填' }],
                isCrack: [{ required: true, message: '必填' }],
                isShow: [{ required: true, message: '必填' }],
                isHot: [{ required: true, message: '必填' }],
                money: [{ required: true, message: '必填' }],
                sort: [{ required: true, message: '必填' }],
                type: [{ required: true, message: '必填' }],
                platFrom: [{ required: true, message: '必填'}],
                system: [{ required: true, message: '必填', type: 'array' }],
            },
        }
    },
    created() {
        this.loadData()
    },
    methods: {
        loadData() {
            this.$axios.post(`/soft/page/${this.page}/${this.pageSize}`, this.search).then(({ data }) => {
                if (data.code == 0) {
                    this.dataList = data.rows
                    this.total = data.total
                } else {
                    this.$message.error(data.msg)
                }
            }).catch(() => {
                this.$message.error("查询失败，请联系管理员！")
            })
        },
        getRowKey(row) {
            return row.id
        },
        resetSearch() {
            this.search = this.$options.data().search
            this.loadData()
        },
        selectLoadData() {
            this.search.isDelete = true
            this.loadData()
        },
        openPcsoftwareAdd() {
            this.pcsoftwareDialog = true
        },
        closePcsoftwareDialog() {
            this.$nextTick(() => {
                this.$refs.pcsoftwareRef.resetFields()
                // this.$refs.pcsoftwareRef.clearValidate()
                this.pcsoftware = this.$options.data().pcsoftware
            })
            this.pcsoftwareDialog = false
        },
        closedPcsoftwareDialog() {
            this.$nextTick(() => {
                this.$refs.pcsoftwareRef.resetFields()
                // this.$refs.pcsoftwareRef.clearValidate()
                this.pcsoftware = this.$options.data().pcsoftware
            })
        },
        saveSoftware() {
            this.loadingStatus = true
            this.$refs.pcsoftwareRef.validate((validateor) => {
                if (validateor) {
                    this.$axios.post("/soft/save", this.pcsoftware).then(({ data }) => {
                        if (data.code == 0) {
                            this.loadData()
                        } else {
                            this.$message.error(data.msg)
                        }
                    })
                    this.loadingStatus = false
                    this.closePcsoftwareDialog()
                } else {
                    this.loadingStatus = false
                }
            })
        },
        remove(id) {
            this.$confirm("确认删除该条内容，该操作无法撤回！", "确认删除？", {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'error',
            }).then(() => {
                this.$axios.put(`/soft/remove/${id}`).then(({ data }) => {
                    if (data.code == 0) {
                        this.loadData()
                    } else {
                        this.$message.error(data.msg)
                    }
                })
            }).catch(() => {
                this.$message.info("取消操作")
            })
        },
        recover(id) {
            this.$axios.put(`/soft/recover/${id}`).then(({ data }) => {
                if (data.code == 0) {
                    this.loadData()
                } else {
                    this.$message.error(data.msg)
                }
            })
        },
        selectAndUpdate(row) {
            this.$axios.get(`/soft/getRow/${row.id}`).then(({ data }) => {
                if (data.code == 0) {
                    if (!data.obj.platFrom) {
                        data.obj.system = []
                    }
                    this.pcsoftware = data.obj
                    this.pcsoftwareDialog = true
                } else {
                    this.$message.error(data.msg)
                }
            })
        },
        exportExcel() {
            this.downLoad("http://localhost:8899/excel/downLoadSoftList", "XX分享.xlsx", "post")
        },
        downLoad(url, fileName, methodType = "get", params = null) {
            var xhr = new XMLHttpRequest()
            xhr.open(methodType, url)
            xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8'); //设置请求头(不同属性值传递的方式不同)
            xhr.responseType = 'blob'; //以blob的形式接收数据，一般文件内容比较大
            xhr.onload = function () {
                var content = this.response; //Blob数据
                var elink = document.createElement('a'); // 创建一个a标签用于下载
                elink.download = fileName; //规定被下载的超链接目标名字
                elink.style.display = 'none'; //标签隐藏
                var blob = new Blob([content]);
                elink.href = URL.createObjectURL(blob); //规定链接指向的页面的URL
                document.body.appendChild(elink);
                elink.click(); //原生dom触发
                document.body.removeChild(elink);
            };
            xhr.send(params); //post请求传的参数
        }
    }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.el-dialog-div {
    height: 70vh;
    overflow-y: auto;
}
</style>